<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="js/sweetalert.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

		<script type="text/javascript">
			mui.init();
			function IsDigit(cCheck) {
				return(('0' <= cCheck) && (cCheck <= '9'));
			}

			function IsAlpha(cCheck) {
				return((('a' <= cCheck) && (cCheck <= 'z')) || (('A' <= cCheck) && (cCheck <= 'Z')))
			}

			function IsValid() {
				var struserName = reg.username.value;
				for(nIndex = 0; nIndex < struserName.length; nIndex++) {
					cCheck = struserName.charAt(nIndex);
					if(!(IsDigit(cCheck) || IsAlpha(cCheck))) {
						return false;
					}
				}
				return true;
			}

			function docheck() {
				if(reg.username.value == "") {
					swal({
						title: "用户名为空!",
						text: "请输入用户名!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else if(!IsValid()) {
					swal({
						title: "用户名错误!",
						text: "只能使用数字和字母!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else if(reg.password.value == "") {
					swal({
						title: "密码为空!",
						text: "请输入密码!",
						icon: "error",
						className: "sweetAlert"
					})
					return false;
				} else {
		           return true;
				}
			}
		</script>
	</head>
	<style type="text/css">
		.mui-content {
			margin-top: 30px;
		}
		
		#header {
			align-content: center;
			text-align: center;
			color: black;
			letter-spacing: 1.5px;
			font-size: 45px;
			font-family: "times new roman";
			font-style: italic;
			margin-bottom: 40px;
			background-color: transparent;
		}
		
		.mui-input-group {
			background-color: transparent;
			margin-top: 10px;
			boder: none;
		}
		
		.mui-input-row {
			border-top-style: none;
			/*border-bottom-color: black;
		border-bottom: solid;
		border-bottom-width: 1px;*/
		}
		
		.account_pass {
			font-family: "微软雅黑";
			font-size: 20px;
		}
		
		.mui-input-clear {}
		
		.mui-btn {
			background-color: transparent;
			border: none;
			font-family: "微软雅黑";
			font-size: 20px;
			margin-top: 30px;
			padding-right: 50px;
			padding-left: 50px;
		}
		
		.hrLine {
			vertical-align: middle;
			display: inline-block;
		}
		
		.mui-icon {
			margin-top: 30px;
			margin-bottom: 10px;
			font-size: 55px;
			padding-left: 53px;
			padding-right: 60px;
		}
		
		.bottom-label {
			padding-left: 55px;
			padding-right: 60px;
			font-size: 15px;
		}
	</style>

	<body>
		<div style="solid #000000; width: 350px; height: 0px;margin: 0 auto;">
			<div class="mui-content">
				<div>
					<p align="center"><img src="img/head_picture.PNG"></img>
					</p>
					<p id="header">TennisWorld</p>
				</div>

				<form class="mui-input-group" id="loginform" name="reg" action="login.php" method="post">
					<div class="mui-input-row">
						<label class="account_pass">账号</label>
						<input type="text" name="username" class="mui-input-clear" placeholder="手机号、用户名、邮箱">
					</div>

					<div class="mui-input-row">
						<label class="account_pass">密码</label>
						<input type="password" name="password" class="mui-input-clear" placeholder="请输入登录密码">
					</div>
					<div style="text-align:center">
						<button onclick="return docheck()" class="mui-btn">登录</button>
					</div>
				</form>
				
				<div style="text-align:center">
					<button class="mui-btn" onclick="window.location.href='reg.html'">注册</button>
				</div>
				<!--<div style="text-align:right">
					<a href="#" style="color: gray; padding-right: 10px;">忘记密码</a>
				</div>-->
				
				<div style=" width:100%;margin-left: 5%; margin-right: 5%;margin-top: 50px;">
					<hr class="hrLine" style="width:30%;" /> 第三方登录
					<hr class="hrLine" style="width:30%;" />
				</div>
				<a href="#" style="color: gray"><span class="mui-icon mui-icon-qq"></span></a>
				<a href="#" style="color: gray;"><span class="mui-icon mui-icon-weixin"></span></a>
				<label class="bottom-label">QQ登录</label>
				<label class="bottom-label">微信登录</label>
			</div>
		</div>
	</body>

</html>